<script>
export default {
  name: "first_popup",
  data() {
    return {
      info: {
        title: '弹窗标题',
        maskClick: false,
        bottomContentWidth: '362rpx',
        isShowConfirm: true,
        showColseButton:true,
        confirm: () => {
        }
      }
    }
  },
  methods: {
    openPopup(obj) {
      this.info.title = obj.title
      this.info.maskClick = obj.maskClick
      this.info.confirm = obj.confirm
      this.info.bottomContentWidth = !!obj.bottomContentWidth ? obj.bottomContentWidth : '362rpx'
      if (obj.isShowConfirm === false) {
        this.info.isShowConfirm = false
      }
      if (obj.showColseButton === false) {
        this.info.showColseButton = false
      }
      this.$refs.popup.open()
    },
    closePopup() {
      this.$refs.popup.close()
    }
  },
}
</script>

<template>
  <uni-popup ref="popup" :maskClick="info.maskClick">
    <view class="first_popup allColumnCenter">
      <view class="first_popup_header allRowCenter">
        <text class="first_popup_header_text">{{ info.title }}</text>
        <image class="first_popup_header_image" src="/static/shiqin-images/popupClose.png" mode="widthFix" v-if="info.showColseButton"
               @click="closePopup"></image>
      </view>
      <slot></slot>

      <view class="row items-center justify-between">
        <slot name="bottomContent"></slot>
        <view class="first_popup_bottom allRowCenter mt-48 mb-120" :style="{
        width:info.bottomContentWidth
        }" @click="()=>{
        this.info.confirm()
      }" v-if="info.isShowConfirm">
          <text class="first_popup_bottom_text">确定</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.first_popup {
  width: 613rpx;
  background: #FFFFFF;
  border-radius: 43rpx 43rpx 43rpx 43rpx;
  border: 2rpx solid #707070;
  overflow: hidden;

  .first_popup_header {
    width: 613rpx;
    height: 93rpx;
    background: #FFFFFF;
    border-radius: 43rpx 43rpx 0rpx 0rpx;
    //border: 1rpx solid #707070;
    position: relative;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #292929;
    }

    &_image {
      width: 62rpx;
      position: absolute;
      right: 18rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .first_popup_bottom {
    height: 80rpx;
    background: #FF4206;
    border-radius: 41rpx 41rpx 41rpx 41rpx;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>